<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
	<script src="http://47.106.66.89:8080/js/vue.min.js"></script>
	<script src="http://47.106.66.89:8080/js/axios.min.js"></script>
	<link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
	<script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
	<script src="js/vote.js"></script>
</head>
<body>
<div id="app">
	<vote>
		<div id="login" class="wrap" style="padding: 20px">
			<div class="main">
				<div class="corner"></div>
				<div class="introduce">
					<h2>源辰信息</h2>
					<p>网上调查系统...</p>
				</div>
				<div class="login">
					<h2>用户登录</h2>
					<form @submit.prevent="login">
						<dl id="loginBox">
							<dt>用户名：</dt>
							<dd><input type="text" class="input-text" v-model="uname" placeholder="请输入用户名"/></dd>
							<dt>密　码：</dt>
							<dd><input type="password" class="input-text" v-model="pwd" placeholder="请输入密码"/></dd>
							<dt></dt>
							<dd><input type="submit" class="input-button" value="登录" /> <a href="register.html">新用户注册</a></dd>
						</dl>
					</form>
					<div class="error" v-if="errorMsg">{{errorMsg}}</div>
				</div>
			</div>
		</div>
		<div class="wrap">
		</div>
	</vote>
</div>
<script>
	let v = new Vue({
		el: "#app",
		data: {
			uname: '',
			pwd: '',
			errorMsg: ''
		},
		methods: {
			login: function() {
				// 清空错误信息
				this.errorMsg = '';
				
				// 简单的前端验证
				if (!this.uname) {
					this.errorMsg = '请输入用户名';
					return;
				}
				if (!this.pwd) {
					this.errorMsg = '请输入密码';
					return;
				}
				
				// 准备表单数据
				const formData = new FormData();
				formData.append('uname', this.uname);
				formData.append('pwd', this.pwd);
				
				// 发送登录请求
				axios.post('/user/login', formData).then(response => {
					const result = response.data;
					if (result.code === 1) {
						// 登录成功，跳转到首页
						alert('登录成功！');
						window.location.href = 'index.html';
					} else {
						// 登录失败，显示错误信息
						this.errorMsg = result.msg || '登录失败';
					}
				}).catch(error => {
					// 处理请求错误
					if (error.response && error.response.data && error.response.data.msg) {
						this.errorMsg = error.response.data.msg;
					} else {
						this.errorMsg = '网络错误，请稍后重试';
					}
				});
			}
		}
	})
</script>


</body>
</html>
